<template>
  <div class="goodList">
    <!-- 头部导航 -->
    <headNav :cname="cname"></headNav>
    <!-- 标题 -->
    <div class="goodList_title">
      <el-row :gutter="20">
        <el-col :span="24">
          <ul>
            <li :key="item.name" v-for="item in goodslistData">{{item.name}}({{item.goodCount}})</li>
          </ul>
        </el-col>
      </el-row>
    </div>
    <!-- 筛选查询 -->
    <div class="goodList_shaixuan">
      <el-row :gutter="24">
        <el-col :span="24">
          <div class="shaixuan_box">
            <div>
              <i class="el-icon-search"></i>
              筛选查询
            </div>
            <div>
              <div class="shaixuan_icon" @click="isShowShaixuan">
                <i
                  :class="
                    isShowShop ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
                  "
                ></i>
                收起筛选
              </div>
              <ul>
                <li>查询结果</li>
                <li>高级检索</li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="goodList_input" v-show="isShowShop">
        <div>
          输入搜索：
          <input type="text" class="goodLis_shop_input" placeholder="商品名称/商品货号" />
        </div>
        <div class="goodList_input_fenlei">
          商品品牌:
          <el-input
            size="medium"
            placeholder="请选择商品分类"
            suffix-icon="el-icon-caret-bottom"
            v-model="goodList_shaixuan.name"
          ></el-input>
        </div>
        <div class="goodList_input_fenlei">
          商品分类:
          <el-input
            size="medium"
            placeholder="请选择品牌"
            suffix-icon="el-icon-caret-bottom"
            v-model="goodList_shaixuan.name"
          ></el-input>
        </div>
      </div>
    </div>
    <!-- 封装Title组件 -->
    <GoodTitle>
      <template>
        <div class="goodTitle">
          <div class="goodTitle_one">
            <i class="el-icon-s-operation"></i>
            <span>数据列表</span>
          </div>
          <div class="goodTitle_three">
            <ul>
              <li>
                显示条数
                <i class="el-icon-caret-bottom"></i>
              </li>
              <li>
                排序方式
                <i class="el-icon-caret-bottom"></i>
              </li>
            </ul>
          </div>
          <div class="goodTitle_tow">
            <ul>
              <li>修改基本信息</li>
              <li>修改商品详情</li>
            </ul>
          </div>
        </div>
      </template>
    </GoodTitle>
    <!-- 渲染用户 -->
    <el-table row-key="id" border :data="goodList" style="width:100%!important" stripe>
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="username" label="编号">
        <template slot-scope="scope">
          <div>
            <div>{{ scope.row.bianhao }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="商品图片">
        <template slot-scope="scope">
          <div>
            <img :src="scope.row.goodsImg" alt />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="商品名称">
        <template slot-scope="scope">
          <div>
            {{ scope.row.goddsTitle.sj }}
            品牌：{{ scope.row.goddsTitle.pinpai }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="role_name" label="价格/货号">
        <template slot-scope="scope">货号价格：{{ scope.row.huohao }}</template>
      </el-table-column>
      <el-table-column label="标签">
        <template slot-scope="scope">
          上架：
          <el-switch v-model="scope.row.biaoqian"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="SKU库存">
        <template slot-scope>库存</template>
      </el-table-column>
      <el-table-column prop="mobile" label="销量">
        <template slot-scope="scope">{{ scope.row.xiaoliang }}</template>
      </el-table-column>
      <el-table-column prop="mobile" label="审核状态">
        <template>
          <div>
            <p>已审核</p>
            <p class="ppppppp">审核详细信息</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140px">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="bianJiEmit(scope.row.id)"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-delete"
            size="mini"
            @click="deleteShangchu(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
      <!-- footer 页码 -->

      <template slot="append">
        <div class="append_box">
          <div class="append_box_tow">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="userManagement.pagenum"
              :page-sizes="[2, 3, 5, 10]"
              :page-size="userManagement.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </template>
    </el-table>
  </div>
</template>
<script>
import GoodTitle from '../../../componetsZuJian/GoodTitle.vue'

export default {
  components: {
    GoodTitle
  },
  data() {
    return {
      goodslistData: [],
      cname: '商品列表',
      goodList_shaixuan: {
        name: ''
      },
      isShowShop: true,
      goodList: [],
      total: 100,
      userManagement: {
        pagenum: 1,
        pagesize: 2
      },
      checked: false
    }
  },
  created() {
    this.getGoodList()
  },
  methods: {
    async getGoodList() {
      const { data: res } = await this.$http.get('/goodList')
      this.goodList = res.data
      const { data: res1 } = await this.$http.get('/allgoods')
      this.goodslistData = res1.res1
      console.log(this.goodslistData, 111111)
      // console.log(this.goodList, 11111111111)
    },
    isShowShaixuan() {
      if (this.isShowShop) {
        this.isShowShop = false
      } else {
        this.isShowShop = true
      }
    },
    handleSizeChange(val) {
      this.userManagement.pagesize = val
      console.log(val, 'valval')
    },
    handleCurrentChange() {},
    currentPage4() {}
  }
}
</script>
<style lang="less">
.goodList {
  padding: 0 90px;
  .append_box {
    .append_box_one {
      float: left;
      .el-checkbox {
        margin-left: 15px;
      }
    }
    .append_box_tow {
      margin-left: 100px;
    }
  }
  .ppppppp {
    color: lightblue;
    cursor: pointer;
  }
  .goodList_title {
    height: 70px;
    background-color: #f9f9f9;

    ul {
      li {
        margin: 13px 10px 10px 15px;
        float: left;
        text-align: center;
        height: 40px;
        line-height: 40px;
        width: 100px;
        background-color: #fff;
        border-radius: 10px;
        &:hover {
          background-color: lightblue;
          color: #fff;
        }
      }
    }
  }
  .goodList_shaixuan {
    line-height: 50px;
    background-color: #f3f3f3;
    border: 1px solid #ccc;
    .shaixuan_box {
      padding: 0 15px;
      display: flex;
      justify-content: space-between;
      .shaixuan_icon {
        float: left;
      }
      ul {
        float: left;
        li {
          margin: 4px 8px;
          float: left;
          text-align: center;
          border-radius: 8px;
          height: 40px;
          line-height: 40px;
          width: 70px;
          background-color: #fff;
          &:hover {
            background-color: #ccc;
          }
        }
      }
    }
    .goodList_input {
      padding: 0 30px;
      display: flex;
      background-color: #fff;
      .goodLis_shop_input {
        height: 30px;
      }
      .goodList_input_fenlei {
        margin-left: 20px;
        display: flex;
        .el-input {
          width: 170px;
          margin-left: 6px;
        }
      }
    }
  }
}
</style>
